msg

94:I[903690,["/chat-static/_next/static/immutable/chunks/2dcuzvdevz4_k.js","/chat-static/_next/static/immutable/chunks/0lyxw0nk-7-p_.js","/chat-static/_next/static/immutable/chunks/0s13a2j9-r_7z.js","/chat-static/_next/static/immutable/chunks/05z0jc31ylkrk.js","/chat-static/_next/static/immutable/chunks/2836u6jwf9bgv.js","/chat-static/_next/static/immutable/chunks/3ktygcwrvju41.js","/chat-static/_next/static/immutable/chunks/3npdfuq6kuky8.js","/chat-static/_next/static/immutable/chunks/3xgcz543a20n9.js","/chat-static/_next/static/immutable/chunks/2ks2dvr47nqsg.js","/chat-static/_next/static/immutable/chunks/3r0_oixh4x4tv.js","/chat-static/_next/static/immutable/chunks/03w_e6mqufrhn.js","/chat-static/_next/static/immutable/chunks/2p9ctj7pk72l5.js","/chat-static/_next/static/immutable/chunks/2sp-yda0t06bm.js","/chat-static/_next/static/immutable/chunks/06-mpaxkl_qww.js","/chat-static/_next/static/immutable/chunks/2v1ytxhjawdqw.js","/chat-static/_next/static/immutable/chunks/3vhx3fg583u19.js","/chat-static/_next/static/immutable/chunks/3bon2sery8l35.js","/chat-static/_next/static/immutable/chunks/1gzknvwsclv4l.js","/chat-static/_next/static/immutable/chunks/2i4yf33swcksd.js","/chat-static/_next/static/immutable/chunks/3yud-vtspzl8e.js","/chat-static/_next/static/immutable/chunks/0p53vlmp4shc6.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/0ggiln07qpg3x.js","/chat-static/_next/static/immutable/chunks/14em_ffr0k3a5.js","/chat-static/_next/static/immutable/chunks/362eoze68z3tj.js","/chat-static/_next/static/immutable/chunks/30xbirk075f9u.js","/chat-static/_next/static/immutable/chunks/3elayl0c5orfd.js","/chat-static/_next/static/immutable/chunks/2r3778mxx4zx3.js","/chat-static/_next/static/immutable/chunks/0b4iu2fk2i2c3.js","/chat-static/_next/static/immutable/chunks/24oxen36r-7_-.js","/chat-static/_next/static/immutable/chunks/21nzp1fdul4xe.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/2j03b7_40fipe.js","/chat-static/_next/static/immutable/chunks/27kqtemkm6wc0.js","/chat-static/_next/static/immutable/chunks/1gwh2_shftvhf.js","/chat-static/_next/static/immutable/chunks/0qa_rvco-l87d.js","/chat-static/_next/static/immutable/chunks/0dc2z2957q9wo.js","/chat-static/_next/static/immutable/chunks/30afi51ct7djr.js","/chat-static/_next/static/immutable/chunks/1etiboqt-76vo.js","/chat-static/_next/static/immutable/chunks/30c9gel_8-oba.js","/chat-static/_next/static/immutable/chunks/1elbuzr4anjh-.js","/chat-static/_next/static/immutable/chunks/1cjv7-9x6cayj.js"],"ExplicitChatIdProvider"] 95:I[838238,["/chat-static/_next/static/immutable/chunks/2dcuzvdevz4_k.js","/chat-static/_next/static/immutable/chunks/0lyxw0nk-7-p_.js","/chat-static/_next/static/immutable/chunks/0s13a2j9-r_7z.js","/chat-static/_next/static/immutable/chunks/05z0jc31ylkrk.js","/chat-static/_next/static/immutable/chunks/2836u6jwf9bgv.js","/chat-static/_next/static/immutable/chunks/3ktygcwrvju41.js","/chat-static/_next/static/immutable/chunks/3npdfuq6kuky8.js","/chat-static/_next/static/immutable/chunks/3xgcz543a20n9.js","/chat-static/_next/static/immutable/chunks/2ks2dvr47nqsg.js","/chat-static/_next/static/immutable/chunks/3r0_oixh4x4tv.js","/chat-static/_next/static/immutable/chunks/03w_e6mqufrhn.js","/chat-static/_next/static/immutable/chunks/2p9ctj7pk72l5.js","/chat-static/_next/static/immutable/chunks/2sp-yda0t06bm.js","/chat-static/_next/static/immutable/chunks/06-mpaxkl_qww.js","/chat-static/_next/static/immutable/chunks/2v1ytxhjawdqw.js","/chat-static/_next/static/immutable/chunks/3vhx3fg583u19.js","/chat-static/_next/static/immutable/chunks/3bon2sery8l35.js","/chat-static/_next/static/immutable/chunks/1gzknvwsclv4l.js","/chat-static/_next/static/immutable/chunks/2i4yf33swcksd.js","/chat-static/_next/static/immutable/chunks/3yud-vtspzl8e.js","/chat-static/_next/static/immutable/chunks/0p53vlmp4shc6.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/0ggiln07qpg3x.js","/chat-static/_next/static/immutable/chunks/14em_ffr0k3a5.js","/chat-static/_next/static/immutable/chunks/362eoze68z3tj.js","/chat-static/_next/static/immutable/chunks/30xbirk075f9u.js","/chat-static/_next/static/immutable/chunks/3elayl0c5orfd.js","/chat-static/_next/static/immutable/chunks/2r3778mxx4zx3.js","/chat-static/_next/static/immutable/chunks/0b4iu2fk2i2c3.js","/chat-static/_next/static/immutable/chunks/24oxen36r-7_-.js","/chat-static/_next/static/immutable/chunks/21nzp1fdul4xe.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/2j03b7_40fipe.js","/chat-static/_next/static/immutable/chunks/27kqtemkm6wc0.js","/chat-static/_next/static/immutable/chunks/1gwh2_shftvhf.js","/chat-static/_next/static/immutable/chunks/0qa_rvco-l87d.js","/chat-static/_next/static/immutable/chunks/0dc2z2957q9wo.js","/chat-static/_next/static/immutable/chunks/30afi51ct7djr.js","/chat-static/_next/static/immutable/chunks/1etiboqt-76vo.js","/chat-static/_next/static/immutable/chunks/30c9gel_8-oba.js","/chat-static/_next/static/immutable/chunks/1elbuzr4anjh-.js","/chat-static/_next/static/immutable/chunks/1cjv7-9x6cayj.js"],"SWRDataProvider"] 96:T22da,[V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true" import { MenuBar } from "@/components/menu-bar" export default function Page() { return (

) } [V0_FILE]typescriptreact:file="app/globals.css" isQuickEdit="true" @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .tooltip-content { display: inline-block; white-space: nowrap; } .tooltip-content-wrapper { position: relative; height: 16px; overflow: hidden; animation: fadeIn 150ms ease-out; } .tooltip-label { position: absolute; top: 0; left: 0; right: 0; opacity: 1; transform: translateY(0); transition: all 800ms cubic-bezier(0.34, 1.56, 0.64, 1); } [data-state='closed'] { opacity: 0; transition: opacity 150ms ease-out; } [data-state='open'] { opacity: 1; transition: opacity 150ms ease-out, width 800ms cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-100%); opacity: 0; } } .tooltip-content.slide-in { animation: slideIn 150ms ease-out; } .tooltip-content.slide-out { animation: slideOut 150ms ease-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideIn { from { transform: translateY(-5px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .tooltip-animation { animation: fadeIn 0.3s ease-in-out, slideIn 0.3s ease-in-out; } [V0_FILE]typescriptreact:file="components/menu-bar.tsx" 'use client' import { useState, useRef, useEffect } from 'react' import { motion, AnimatePresence } from 'framer-motion' interface MenuBarProps { className?: string } const menuItems = [ { icon: (props: React.SVGProps) => ( ), label: "Messages" }, { icon: (props: React.SVGProps) => ( ), label: "Mail" }, { icon: (props: React.SVGProps) => ( ), label: "Explore" }, { icon: (props: React.SVGProps) => ( ), label: "Share" }, { icon: (props: React.SVGProps) => ( ), label: "Write" }, { icon: (props: React.SVGProps) => ( ), label: "Menu" } ] export function MenuBar({ className }: MenuBarProps) { const [activeIndex, setActiveIndex] = useState(null); const menuRef = useRef(null); const [tooltipPosition, setTooltipPosition] = useState({ left: 0, width: 0 }); const tooltipRef = useRef(null); useEffect(() => { if (activeIndex !== null && menuRef.current && tooltipRef.current) { const menuItem = menuRef.current.children[activeIndex] as HTMLElement; const menuRect = menuRef.current.getBoundingClientRect(); const itemRect = menuItem.getBoundingClientRect(); const tooltipRect = tooltipRef.current.getBoundingClientRect(); const left = itemRect.left - menuRect.left + (itemRect.width - tooltipRect.width) / 2; setTooltipPosition({ left: Math.max(0, Math.min(left, menuRect.width - tooltipRect.width)), width: tooltipRect.width }); } }, [activeIndex]); return (

{activeIndex !== null && (

{menuItems[activeIndex].label}

)}

{menuItems.map((item, index) => ( ))}

) } 8a:["$","$L94",null,{"chatId":"QQuRufafvGP","children":["$","$L95",null,{"data":{"@\"active-block\",\"QQuRufafvGP\",":{"id":"iXhP8PFsPfc","messageId":"y2k6vJOJVvZsp3dsHj2p4YCzn3hsosVV","source":"$96","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"menu-interface","type":"code-project","project":"menu-interface"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"QQuRufafvGP\",":false,"":null},"children":"$L97"}]}]

About

Tags

Share

About

Tags

Share

About

Tags

Share

More from yadwinder

More Templates Like This